<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478F2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="设置"
				title-color="#fff"
				title-size="40"
				title-bold
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="page">
				<image class="img" src="/static/icon/head.png" mode="scaleToFill" />
				<view class="number">{{ phone }}</view>
				<view class="text">当前账户</view>
				<view class="out" @click="open">退出登录</view>
				<uni-popup ref="popup" type="center">
					<view class="pop">
						<view class="pop_text">确定要退出当前账户吗？</view>
						<view>
							<button class="pop_conform" @click="close">取消</button>
						</view>
						<view class="pop_last" @click="out">确定退出</view>
						<view class="pop_out" @click="close">
							<u-icon name="close" color="#ffffff" size="40"></u-icon>
						</view>
					</view>
				</uni-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	components: {},

	data() {
		return {
			phone: ''
		}
	},
	computed: {},
	watch: {},
	onLoad(ops) {
		const { phone } = ops
		this.phone = phone
	},
	onShow() {},
	onReady() {},
	// 方法集合
	methods: {
		open() {
			this.$refs.popup.open()
		},
		close() {
			this.$refs.popup.close()
		},
		out() {
			this.$refs.popup.close()
			uni.removeStorageSync('token')
			uni.reLaunch({
				url: '/pages/login/login'
			})
		}
	},
	onHide() {},
	onUnload() {}
}
</script>

<style lang="scss" scoped>
.page {
	height: 100%;
	background-color: #fff;
	padding: 134rpx 176rpx;
	font-family: PingFang SC;
	text-align: center;
	.number {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 40rpx;
	}
	.text {
		font-size: 28rpx;
		font-weight: 400;
		color: #696969;
	}
	.out {
		margin-top: 244rpx;
		width: 396rpx;
		height: 88rpx;
		background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
		border-radius: 70rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 88rpx;
		font-family: PingFang SC;
	}
}
.img {
	display: block;
	width: 176rpx;
	height: 176rpx;
	margin: 0 auto;
}
.pop {
	width: 606rpx;
	height: 444rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	padding: 60rpx 78rpx;
	text-align: center;
	.pop_text {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.pop_conform {
		margin-top: 76rpx;
		width: 448rpx;
		height: 88rpx;
		background-color: #3478f2;
		font-size: 18px;
		color: #ffffff;
		border-radius: 16rpx;
	}
	.pop_out {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		top: -100rpx;
		right: 0rpx;
	}
	.pop_last {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #696969;
		margin-top: 60rpx;
	}
}
</style>
